<template>
    <div class="tab">
        <div class="card-tab displayFlex justifyCtArd">
            <span class="tab-item positionR" @click="change(value.id,value.name,value.msg)" v-for="value in bannerMsg.list"  :class="{'active':activeId==value.id}">{{value.name}}
                <span v-if="bannerMsg.showNum && bannerMsg.showType == 'bracket'">（{{value.num}}）</span>
                <span v-if="bannerMsg.showNum && bannerMsg.showType == 'point' && value.num" class="red-point">{{value.num}}</span>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        props:{
            bannerProps:Object,
        },
        data(){
            return{
                activeId:-1,
                bannerMsg:{
                    // showNum:true,
                    // showType:'bracket',//bracket：括号 point ：红点
                    // list:[
                    //     {
                    //         id:0,
                    //         name:'可用',
                    //         num:1,
                    //         default:false,
                    //         showNum:false,
                    //     },
                    //     {
                    //         id:1,
                    //         name:'不可用',
                    //         num:1,
                    //         default:false,
                    //         showNum:false,
                    //     }
                    // ]
                }
            }
        },
        mounted(){
            let that = this;
            this.bannerMsg = Object.assign({},this.bannerMsg,this.bannerProps);
            if( this.bannerMsg.list && this.bannerMsg.list.length ){
                that.bannerMsg.list.forEach((value,index)=>{
                    if(value.default){
                        that.activeId = value.id;
                    }
                });
                this.bannerMsg.list.splice(0,1,this.bannerMsg.list[0]);
            }
            if( that.activeId < 0 ){
                that.activeId = 0;
            }
        },
        methods:{
            change(id,name,msg){
                let tempObj = {
                    id,
                    name,
                    msg,
                };
                this.activeId = id;
                this.$emit('tapItem',tempObj);
            }
        },
        watch:{
            bannerProps(val){
                let that = this;
                this.bannerMsg = Object.assign({},this.bannerMsg,val);
                if( this.bannerMsg.list && this.bannerMsg.list.length ){
                    that.bannerMsg.list.forEach((value,index)=>{
                        if(value.default){
                            that.activeId = value.id;
                        }
                    })
                    this.bannerMsg.list.splice(0,1,this.bannerMsg.list[0]);
                }
                if( that.activeId < 0 ){
                    that.activeId = 0;
                }
            }
        }
    }
</script>

<style scoped>
    .card-tab{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        background-color: #fff;
        border-top-right-radius: .1rem;
        border-top-left-radius: .1rem;
    }
    .tab-item{
        display: inline-block;
        height: .4rem;
    }
    .active.tab-item{
        color: #5D89E8;
        border-bottom:2px solid #5D89E8;
    }
    .red-point{
        display: inline-block;
        width: .18rem;
        height: .18rem;
        line-height: .18rem;
        background-color: #FF3333;
        font-size: .14rem;
        color: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        right: -.09rem;
        top: .02rem;
        position: absolute;
    }
</style>